<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>系统设置</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    :root {
      --primary-color: #3498db;
      --secondary-color: #2ecc71;
      --danger-color: #e74c3c;
      --warning-color: #f39c12;
      --dark-color: #34495e;
      --light-color: #ecf0f1;
      --border-color: #ddd;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f5f7fa;
      color: #333;
    }

  /*  .main-content {
      margin-left: 250px;
      transition: all 0.3s;
      padding: 20px;
    }*/

    .collapsed .main-content {
      margin-left: 70px;
    }

    .top-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: white;
      padding: 15px 20px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      margin-bottom: 20px;
    }

    #toggleSidebar {
      background-color: var(--primary-color);
      border: none;
      padding: 8px 12px;
      border-radius: 6px;
      color: white;
      cursor: pointer;
      transition: all 0.3s;
    }

    #toggleSidebar:hover {
      background-color: #2980b9;
      transform: scale(1.05);
    }

    .user-info {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .user-info img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid var(--primary-color);
    }

    .user-info span {
      font-weight: 600;
      color: var(--dark-color);
    }

    .card {
      border: none;
      border-radius: 10px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      overflow: hidden;
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 20px;
      background-color: white;
      border-bottom: 1px solid var(--border-color);
    }

    .card-header h3 {
      margin: 0;
      color: var(--dark-color);
      font-weight: 600;
    }

    /* 选项卡样式 */
    .settings-tabs {
      margin-top: 15px;
    }

    .nav-tabs {
      border-bottom: 2px solid var(--border-color);
    }

    .nav-tabs .nav-link {
      color: var(--dark-color);
      border: none;
      padding: 12px 20px;
      font-weight: 500;
      transition: all 0.2s;
      border-radius: 0;
      position: relative;
    }

    .nav-tabs .nav-link:hover {
      color: var(--primary-color);
      background-color: rgba(52, 152, 219, 0.05);
    }

    .nav-tabs .nav-link.active {
      color: var(--primary-color);
      background-color: transparent;
      border-bottom: 2px solid var(--primary-color);
    }

    .tab-content {
      padding: 20px;
      background-color: white;
      border-radius: 0 0 8px 8px;
    }

    /* 表单样式 */
    .form-group {
      margin-bottom: 20px;
    }

    .form-control {
      border-radius: 6px;
      border: 1px solid var(--border-color);
      padding: 10px 15px;
      transition: all 0.2s;
    }

    .form-control:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
    }

    .btn {
      padding: 10px 20px;
      border-radius: 6px;
      font-weight: 500;
      transition: all 0.2s;
    }

    .btn-primary {
      background-color: var(--primary-color);
      border-color: var(--primary-color);
    }

    .btn-primary:hover {
      background-color: #2980b9;
      border-color: #2980b9;
    }

    .btn-secondary {
      background-color: var(--dark-color);
      border-color: var(--dark-color);
    }

    .btn-secondary:hover {
      background-color: #2c3e50;
      border-color: #2c3e50;
    }

    .btn-danger {
      background-color: var(--danger-color);
      border-color: var(--danger-color);
    }

    .btn-danger:hover {
      background-color: #c0392b;
      border-color: #c0392b;
    }

    /* 警告框样式 */
    .alert {
      padding: 15px;
      border-radius: 6px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      border: none;
    }

    .alert i {
      margin-right: 10px;
      font-size: 1.2rem;
    }

    .alert-info {
      background-color: #d1ecf1;
      color: #0c5460;
    }

    .alert-success {
      background-color: #d4edda;
      color: #155724;
    }

    .alert-warning {
      background-color: #fff3cd;
      color: #856404;
    }

    .alert-danger {
      background-color: #f8d7da;
      color: #721c24;
    }

    /* 备份操作区 */
    .backup-actions {
      display: flex;
      gap: 15px;
      margin-bottom: 20px;
    }

    /* 备份列表 */
    .backup-list {
      margin-top: 20px;
    }

    .backup-list h5 {
      color: var(--dark-color);
      margin-bottom: 15px;
      font-weight: 600;
    }

    .table {
      margin-bottom: 0;
      border: 1px solid var(--border-color);
    }

    .table thead th {
      background-color: #f8f9fa;
      border-bottom: 2px solid var(--border-color);
      font-weight: 600;
      color: var(--dark-color);
      padding: 12px 15px;
    }

    .table tbody td {
      padding: 12px 15px;
      vertical-align: middle;
      border-top: 1px solid var(--border-color);
    }

    .table tbody tr:hover {
      background-color: rgba(52, 152, 219, 0.05);
    }

    .btn-sm {
      padding: 5px 10px;
      border-radius: 4px;
      font-size: 0.85rem;
    }

    .btn-sm i {
      font-size: 0.8rem;
    }

    /* 响应式设计 */
    @media (max-width: 992px) {
      .main-content {
        margin-left: 0;
      }

      .collapsed .main-content {
        margin-left: 0;
      }

      .nav-tabs .nav-link {
        padding: 10px 15px;
        font-size: 0.9rem;
      }
    }

    @media (max-width: 768px) {
      .backup-actions {
        flex-direction: column;
      }

      .backup-actions .btn {
        width: 100%;
      }

      .table-responsive {
        overflow-x: auto;
      }

      .user-info span {
        display: none;
      }
    }
  </style>
</head>
<body>
<div class="main-content">
  <!--<div class="top-nav">
    <div>
      <button class="btn btn-primary" id="toggleSidebar">
        <i class="fas fa-bars"></i> 菜单
      </button>
    </div>
    <div class="user-info">
      <img src="https://via.placeholder.com/40" alt="用户头像">
      <span>北极星</span>
    </div>
  </div>-->

  <div class="card">
    <div class="card-header">
      <h3>系统设置</h3>
    </div>
    <div class="card-body">
      <div class="settings-tabs">
        <ul class="nav nav-tabs" id="settingsTabs">
          <li class="nav-item">
            <a class="nav-link active" href="#" data-bs-toggle="tab" data-bs-target="#general">常规设置</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" data-bs-toggle="tab" data-bs-target="#seo">SEO设置</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" data-bs-toggle="tab" data-bs-target="#email">邮件设置</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" data-bs-toggle="tab" data-bs-target="#backup">备份与恢复</a>
          </li>
        </ul>

        <div class="tab-content">
          <!-- 常规设置 -->
          <div class="tab-pane fade show active" id="general">
            <div id="generalAlert" class="alert" style="display: none;"></div>
            <form id="generalForm">
              <div class="form-group">
                <label>网站标题</label>
                <input type="text" class="form-control" id="siteTitle" value="北极星 - 全栈开发工程师" required>
              </div>
              <div class="form-group">
                <label>网站描述</label>
                <textarea class="form-control" id="siteDescription" rows="3" required>专注于为企业与个人提供高质量的定制化软件开发服务</textarea>
              </div>
              <div class="form-group">
                <label>网站Logo</label>
                <div class="d-flex align-items-center mb-2">
                  <img src="https://via.placeholder.com/200x60" alt="当前Logo" id="currentLogo" class="img-thumbnail me-3" style="max-height: 60px;">
                  <input type="file" class="form-control" id="siteLogo" accept="image/*">
                </div>
                <small class="text-muted">建议尺寸：200x60像素</small>
              </div>
              <div class="form-group">
                <label>网站图标 (Favicon)</label>
                <div class="d-flex align-items-center mb-2">
                  <img src="https://via.placeholder.com/32x32" alt="当前Favicon" id="currentFavicon" class="img-thumbnail me-3" style="max-height: 32px;">
                  <input type="file" class="form-control" id="siteFavicon" accept="image/*">
                </div>
                <small class="text-muted">建议尺寸：32x32像素</small>
              </div>
              <div class="form-group">
                <label>时区</label>
                <select class="form-control" id="timezone" required>
                  <option value="Asia/Shanghai" selected>(UTC+08:00) 上海</option>
                  <option value="America/New_York">(UTC-05:00) 纽约</option>
                  <option value="Europe/London">(UTC+00:00) 伦敦</option>
                </select>
              </div>
              <button type="submit" class="btn btn-primary">保存设置</button>
            </form>
          </div>

          <!-- SEO设置 -->
          <div class="tab-pane fade" id="seo">
            <div id="seoAlert" class="alert" style="display: none;"></div>
            <form id="seoForm">
              <div class="form-group">
                <label>Meta标题</label>
                <input type="text" class="form-control" id="metaTitle" placeholder="默认使用网站标题">
              </div>
              <div class="form-group">
                <label>Meta描述</label>
                <textarea class="form-control" id="metaDescription" rows="3" placeholder="默认使用网站描述"></textarea>
              </div>
              <div class="form-group">
                <label>Meta关键词</label>
                <input type="text" class="form-control" id="metaKeywords" placeholder="多个关键词用逗号分隔">
              </div>
              <div class="form-group">
                <label>网站统计代码</label>
                <textarea class="form-control" id="analyticsCode" rows="4" placeholder="Google Analytics等统计代码"></textarea>
              </div>
              <button type="submit" class="btn btn-primary">保存设置</button>
            </form>
          </div>

          <!-- 邮件设置 -->
          <div class="tab-pane fade" id="email">
            <div id="emailAlert" class="alert" style="display: none;"></div>
            <form id="emailForm">
              <div class="form-group">
                <label>SMTP服务器</label>
                <input type="text" class="form-control" id="smtpServer" placeholder="smtp.example.com" required>
              </div>
              <div class="form-group">
                <label>SMTP端口</label>
                <input type="number" class="form-control" id="smtpPort" placeholder="465" required>
              </div>
              <div class="form-group">
                <label>SMTP用户名</label>
                <input type="text" class="form-control" id="smtpUsername" placeholder="your@email.com" required>
              </div>
              <div class="form-group">
                <label>SMTP密码</label>
                <input type="password" class="form-control" id="smtpPassword">
              </div>
              <div class="form-group">
                <label>发件人邮箱</label>
                <input type="email" class="form-control" id="senderEmail" placeholder="noreply@example.com" required>
              </div>
              <div class="form-group">
                <label>发件人名称</label>
                <input type="text" class="form-control" id="senderName" placeholder="北极星" required>
              </div>
              <div class="form-group">
                <button type="button" class="btn btn-secondary" id="testEmail">
                  <i class="fas fa-paper-plane"></i> 测试邮件发送
                </button>
              </div>
              <button type="submit" class="btn btn-primary">保存设置</button>
            </form>
          </div>

          <!-- 备份与恢复 -->
          <div class="tab-pane fade" id="backup">
            <div id="backupAlert" class="alert" style="display: none;"></div>
            <div class="alert alert-info">
              <i class="fas fa-info-circle"></i> 建议定期备份您的网站数据
            </div>

            <div class="backup-actions">
              <button class="btn btn-primary" id="backupDatabase">
                <i class="fas fa-download"></i> 备份数据库
              </button>
              <button class="btn btn-secondary" id="backupFiles">
                <i class="fas fa-file-archive"></i> 备份文件
              </button>
            </div>

            <div class="backup-list">
              <h5>最近的备份</h5>
              <div class="table-responsive">
                <table class="table">
                  <thead>
                  <tr>
                    <th>备份名称</th>
                    <th>类型</th>
                    <th>大小</th>
                    <th>日期</th>
                    <th>操作</th>
                  </tr>
                  </thead>
                  <tbody id="backupTableBody">
                  <tr>
                    <td>backup_20231205.sql</td>
                    <td>数据库</td>
                    <td>2.5 MB</td>
                    <td>2023-12-05</td>
                    <td>
                      <button class="btn btn-sm btn-primary download-backup"><i class="fas fa-download"></i></button>
                      <button class="btn btn-sm btn-danger delete-backup"><i class="fas fa-trash"></i></button>
                    </td>
                  </tr>
                  <tr>
                    <td>backup_20231130.zip</td>
                    <td>文件</td>
                    <td>15.2 MB</td>
                    <td>2023-11-30</td>
                    <td>
                      <button class="btn btn-sm btn-primary download-backup"><i class="fas fa-download"></i></button>
                      <button class="btn btn-sm btn-danger delete-backup"><i class="fas fa-trash"></i></button>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 测试邮件发送模态框 -->
<div class="modal fade" id="testEmailModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">测试邮件发送</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="testEmailForm">
          <div class="form-group">
            <label>收件人邮箱</label>
            <input type="email" class="form-control" id="testEmailRecipient" required>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="sendTestEmail">发送测试邮件</button>
      </div>
    </div>
  </div>
</div>

<!-- 删除备份确认模态框 -->
<div class="modal fade" id="confirmDeleteBackupModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">确认删除备份</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>您确定要删除此备份文件吗？此操作无法撤销。</p>
        <p id="backupToDelete"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-danger" id="confirmDeleteBackup">确认删除</button>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  // 切换侧边栏
  document.getElementById('toggleSidebar').addEventListener('click', function() {
    document.body.classList.toggle('collapsed');
  });

  // 表单提交处理
  document.getElementById('generalForm').addEventListener('submit', function(e) {
    e.preventDefault();
    showAlert('generalAlert', '常规设置已成功保存！', 'success');
  });

  document.getElementById('seoForm').addEventListener('submit', function(e) {
    e.preventDefault();
    showAlert('seoAlert', 'SEO设置已成功保存！', 'success');
  });

  document.getElementById('emailForm').addEventListener('submit', function(e) {
    e.preventDefault();
    showAlert('emailAlert', '邮件设置已成功保存！', 'success');
  });

  // 显示提示信息
  function showAlert(elementId, message, type) {
    const alertElement = document.getElementById(elementId);
    alertElement.textContent = message;
    alertElement.className = `alert alert-${type}`;
    alertElement.style.display = 'flex';

    setTimeout(() => {
      alertElement.style.display = 'none';
    }, 3000);
  }

  // 测试邮件发送
  document.getElementById('testEmail').addEventListener('click', function() {
    const modal = new bootstrap.Modal(document.getElementById('testEmailModal'));
    modal.show();
  });

  document.getElementById('sendTestEmail').addEventListener('click', function() {
    const recipient = document.getElementById('testEmailRecipient').value;
    if (!recipient) {
      alert('请输入收件人邮箱');
      return;
    }

    // 模拟发送测试邮件
    setTimeout(() => {
      const modal = bootstrap.Modal.getInstance(document.getElementById('testEmailModal'));
      modal.hide();
      showAlert('emailAlert', `测试邮件已发送至 ${recipient}`, 'success');
    }, 1500);
  });

  // 备份操作
  document.getElementById('backupDatabase').addEventListener('click', function() {
    // 模拟备份数据库
    setTimeout(() => {
      const newBackup = {
        name: `backup_${formatDate(new Date())}.sql`,
        type: '数据库',
        size: '3.2 MB',
        date: formatDate(new Date())
      };
      addBackupToTable(newBackup);
      showAlert('backupAlert', '数据库备份已完成！', 'success');
    }, 2000);
  });

  document.getElementById('backupFiles').addEventListener('click', function() {
    // 模拟备份文件
    setTimeout(() => {
      const newBackup = {
        name: `backup_${formatDate(new Date())}.zip`,
        type: '文件',
        size: '18.5 MB',
        date: formatDate(new Date())
      };
      addBackupToTable(newBackup);
      showAlert('backupAlert', '文件备份已完成！', 'success');
    }, 3000);
  });

  // 格式化日期
  function formatDate(date) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}${month}${day}`;
  }

  // 添加备份到表格
  function addBackupToTable(backup) {
    const tbody = document.getElementById('backupTableBody');
    const row = document.createElement('tr');

    row.innerHTML = `
        <td>${backup.name}</td>
        <td>${backup.type}</td>
        <td>${backup.size}</td>
        <td>${backup.date}</td>
        <td>
          <button class="btn btn-sm btn-primary download-backup"><i class="fas fa-download"></i></button>
          <button class="btn btn-sm btn-danger delete-backup"><i class="fas fa-trash"></i></button>
        </td>
      `;

    tbody.insertBefore(row, tbody.firstChild);

    // 添加新行的点击事件
    row.querySelector('.download-backup').addEventListener('click', function() {
      downloadBackup(backup.name);
    });

    row.querySelector('.delete-backup').addEventListener('click', function() {
      confirmDeleteBackup(backup.name);
    });
  }

  // 下载备份
  function downloadBackup(filename) {
    showAlert('backupAlert', `正在下载 ${filename}...`, 'info');
    // 实际应用中这里应该触发文件下载
  }

  // 确认删除备份
  function confirmDeleteBackup(filename) {
    document.getElementById('backupToDelete').textContent = filename;
    const modal = new bootstrap.Modal(document.getElementById('confirmDeleteBackupModal'));
    modal.show();

    document.getElementById('confirmDeleteBackup').onclick = function() {
      // 模拟删除操作
      setTimeout(() => {
        const rows = document.querySelectorAll('#backupTableBody tr');
        rows.forEach(row => {
          if (row.cells[0].textContent === filename) {
            row.remove();
          }
        });
        modal.hide();
        showAlert('backupAlert', `${filename} 已删除`, 'warning');
      }, 500);
    };
  }

  // 为现有备份添加点击事件
  document.querySelectorAll('.download-backup').forEach(btn => {
    btn.addEventListener('click', function() {
      const filename = this.closest('tr').cells[0].textContent;
      downloadBackup(filename);
    });
  });

  document.querySelectorAll('.delete-backup').forEach(btn => {
    btn.addEventListener('click', function() {
      const filename = this.closest('tr').cells[0].textContent;
      confirmDeleteBackup(filename);
    });
  });

  // 图片预览功能
  document.getElementById('siteLogo').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = function(event) {
        document.getElementById('currentLogo').src = event.target.result;
      };
      reader.readAsDataURL(file);
    }
  });

  document.getElementById('siteFavicon').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = function(event) {
        document.getElementById('currentFavicon').src = event.target.result;
      };
      reader.readAsDataURL(file);
    }
  });
</script>
</body>
</html>